<template>
  <div class="container">
    <div class="left-pane" :style="{ width: leftWidth + 'px' }">
      <!-- 左边内容 -->
      <search-view />
    </div>
    <div class="resizer" @mousedown="startResize"></div>
    <div class="right-pane" :style="{ width: rightWidth + 'px' }">
      <!-- 右边内容 -->
      <map-view />
    </div>
    <!-- <el-drawer v-model="showSABlock" title="I am the title" :modal="false">
      <span>Hi, there!</span>
    </el-drawer> -->
    <StatisticBlock />
    <ZongpingStatisticBlock />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import MapView from "./MapView.vue";
import SearchView from "./SearchView.vue";
import StatisticBlock from "./StatisticBlock.vue";
import ZongpingStatisticBlock from "./ZongpingStatisticBlock.vue";

const container = ref(null);
const leftWidth = ref(1000);
const rightWidth = ref();
// const showSABlock = ref(false);

let startX = 0;
let initialLeftWidth = 0;

const calcRemainingWidth = (leftWidth) => {
  return container.value.clientWidth - leftWidth - 5; // 5 是分割线的宽度
};

const startResize = (event) => {
  startX = event.clientX;
  initialLeftWidth = leftWidth.value;

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

const onMouseMove = (event) => {
  const deltaX = event.clientX - startX;
  leftWidth.value = initialLeftWidth + deltaX;
  rightWidth.value = calcRemainingWidth(leftWidth.value);
};

const onMouseUp = () => {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
};

onMounted(() => {
  container.value = document.querySelector(".container");
  rightWidth.value = calcRemainingWidth(leftWidth.value);
});

onUnmounted(() => {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
});
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left-pane,
.right-pane {
  overflow-y: auto;
  box-sizing: border-box;
}

.right-pane {
  flex-grow: 1;
}

.resizer {
  width: 5px;
  cursor: ew-resize;
  background-color: #ccc;
  user-select: none;
}
</style>
